import React, { Component } from 'react';
import * as echarts from 'echarts';
export default class Bar extends Component {
  componentDidMount() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    //

    const data = [
      {
        value: 100,
        itemStyle: {
          color: '#59cb42',
        },
      },
      {
        value: 55.559999999999995,
        itemStyle: {
          color: '#3cefff',
        },
      },
      {
        value: 75.559999999999995,
        itemStyle: {
          color: '#4f9aff',
        },
      },
      {
        value: 45.559999999999995,
        itemStyle: {
          color: '#15924B',
        },
      },
      {
        value: 60.559999999999995,
        itemStyle: {
          color: '#b250ff',
        },
      },
    ];

    // 指定图表的配置项和数据
    var option = {
      backgroundColor: '#0e202d',
      grid: {
        top: '15%',
        left: '10%',
        bottom: '10%',
        right: '10%',
        containLabel: true,
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋'],
        color: 'red',
        position: 'bottom',
        axisTick: {
          alignWithLabel: true,
        },
        offset: 13, //轴相对于默认位置的偏移，在相同的position上有多个轴时有用
        nameTextStyle: {
          color: '#82b0ec',
        },
        axisLine: {
          lineStyle: {
            color: '#82b0ec',
          },
        },
        axisLabel: {
          textStyle: {
            color: '#82b0ec',
          },
        },
      },
      yAxis: [
        {
          type: 'value',
          precision: 2,
          axisLabel: {
            textStyle: {
              color: '#82b0ec',
            },
          },
          splitLine: {
            lineStyle: {
              color: '#0c2c5a',
            },
          },
          axisLine: {
            show: false,
          },
        },
      ],
      series: [
        //绘制顶部圆饼
        {
          name: '',
          type: 'pictorialBar',
          symbolSize: [60, 16],
          symbolOffset: [0, -10],
          symbolPosition: 'end',

          z: 12,
          //"barWidth": "20",
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: function (data) {
                return data.value.toFixed(2);
              },
            },
          },
          data: data,
        },
        //绘制底部圆饼
        {
          name: '',
          type: 'pictorialBar',
          symbolSize: [60, 16],
          symbolOffset: [0, 10],
          // "barWidth": "20",
          z: 12,
          data: data,
        },
        //
        {
          name: '',
          type: 'pictorialBar',
          symbolSize: [90, 30],
          symbolOffset: [0, 20],
          z: 10,
          itemStyle: {
            normal: {
              color: 'transparent',
              borderColor: '#14b1eb',
              borderType: 'dashed',
              borderWidth: 5,
            },
          },
          data: [100, 55.559999999999995, 40, 50, 60],
        },
        {
          type: 'bar',
          itemStyle: {
            normal: {
              //color: '#14b1eb',
              opacity: 0.7,
            },
          },
          //silent: true,
          barWidth: '60',
          //barGap: '-100%', // Make series be overlap
          data: data,
          markLine: {
            symbol: 'none',
            label: {
              position: 'middle',
              formatter: '{b}',
            },
            data: [
              {
                name: '目标值',
                yAxis: 60, //设置水准线
                lineStyle: {
                  color: 'red',
                },
              },
            ],
          },
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }

  render() {
    return <div id="main" style={{ width: '100%', height: '100%' }}></div>;
  }
}
